<!doctype html>
<html>
<head>
<script src="../src/cge.js"></script>
<script src="../src/fps.js"></script>
<script src="../src/canvas.js"></script>
<script src="../src/image.js"></script>
<script src="../src/gradient.js"></script>
<script src="../src/key.js"></script>
<script src="../src/shape.js"></script>

<script>
var screen, buf = [ 0, 0 ];
var dx = 0;

const SW = 128;
const SH = 128;
const MAX_W = 800;
const MAX_H = 600;

function init ()
{
	function _wait ( cback )
	{
		if ( CGE.ready () ) 
			cback ();
		else
			setTimeout ( function () { _wait ( cback ); }, 500 );
	}

	var b = CGE.shape_handler.add ( "res/ball.png", "ball", 128, 128 );
	b.save_background = false;

	screen = CGE.canvas_handler.add ( "screen", 800, 600 );
	buf [ 0 ] = CGE.canvas_handler.add ( "buf0", 800, 600 );
	buf [ 1 ] = CGE.canvas_handler.add ( "buf1", 800, 600 );

	_wait ( app_start );
}

function app_start ()
{
	console.debug ( "APP START" );

	screen.render ( "dest_canvas" );

	var gr = CGE.gradient_handler.add ( "v", "background", 600 );

	gr.add ( 0, "#000044" );
	gr.add ( 1, "#3333cc" );
	gr.blit ( 0,0, 800, 600 );

	CGE.render ( render, 20 );
}

var _x_delta = 5, _y_delta = 4;
var x = 0, y = 0;
function render ()
{
	var c = buf [ dx ];
	var b = CGE.shape_handler.get ( "ball" );

	dx = 1 - dx;

	CGE.canvas = c;
	b.blit ( x, y );

	screen.ctxt.drawImage ( c.canvas, 0, 0 );

	x += _x_delta;
	y += _y_delta;

	if ( x + SW > MAX_W ) _x_delta = - _x_delta;
	if ( y + SH > MAX_H ) _y_delta = - _y_delta;
	if ( x < 0 ) _x_delta = - _x_delta;
	if ( y < 0 ) _y_delta = - _y_delta;
}
</script>
</head>
<body onload="init()">

<div id="dest_canvas" style="border: 2px dotted black; padding: 8px; float: left;"></div>


</body>
</html>
